<template>
  <el-row>
    <el-col :span="24">
      <el-form label-position="left" label-width="120px">
        <!--订单信息-->
        <Portlet class="show" title="订单信息">
          <div slot="tools" v-if="toEdit">
            <el-button type="primary" @click="toEditRedirect">修改</el-button>
          </div>
          <template v-if="expatriate">
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="订单号:">
                <span>{{ chOrder.orderNo}}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="业务类型：">
                <span>{{chOrder.business}}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="服务类型：">
                <span>{{chOrder.service}} {{chOrder.addedService}}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="下单方式：">
                <span>{{detail.biddingType}}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="下单时间：">
                <span>{{ chOrder.foundDate | unixTimestampFilter('YYYY-MM-DD HH:mm') }}</span>
              </el-form-item>
            </el-col>
          </template>
          <template v-else>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="订单号：">
                <span>{{ chOrder.orderNo}}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="商家名称：">
                <span>{{ chOrder.cargoOwner | filterDataBaseDictionary }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="业务类型：">
                <span>{{chOrder.business}}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="服务类型：">
                <span>{{chOrder.service}}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="是否仓储：">
                <span>{{chOrder.isStorage == 1 ? '是' : '否'}}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="chOrder.storageTypeCode" :lg="8" :md="12" :xl="6">
              <el-form-item label="仓储类型：">
                <span>{{chOrder.storageTypeCode | filterDataBaseDictionary}}</span>
              </el-form-item>
            </el-col>
            <el-col v-if="chOrder.warehouse" :lg="8" :md="12" :xl="6">
              <el-form-item label="入库仓：">
                <span>{{ chOrder.warehouse }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="下单时间：">
                <span>{{ chOrder.foundDate | unixTimestampFilter('YYYY-MM-DD HH:mm') }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :md="12" :xl="6">
              <el-form-item label="订单状态：">
                <span>{{ chOrder.orderState | filterDataBaseDictionary }}</span>
              </el-form-item>
            </el-col>
          </template>
        </Portlet>
        <Portlet v-if="!expatriate" title="商品信息">
          <el-col :span="24">
            <el-form-item label="商品类型：">
              <span>{{getType(chOrder.productType)}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="0">
              <el-table
                border
                max-height="500"
                :data="productExtBeans"
                class="text-center"
                :summary-method="getSummaries"
                show-summary
                :header-cell-style="{'text-align': 'center'}"
                :cell-style="{'text-align': 'center'}"
              >
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="manufacturerName"
                  label="厂家名称"
                >
                </el-table-column>
                <el-table-column
                  prop="productNo"
                  label="商品编号">
                </el-table-column>
                <el-table-column
                  prop="productName"
                  width="250"
                  label="商品名称">
                </el-table-column>
                <el-table-column
                  prop="big_class"
                  label="商品大类">
                </el-table-column>
                <el-table-column
                  prop="middle_class"
                  label="商品小类">
                </el-table-column>
                <el-table-column
                  prop="roomArea"
                  label="房间区域">
                </el-table-column>
                <el-table-column
                  prop="productUseNum"
                  label="可用库存">
                  <template slot-scope="scope">
                    {{ scope.row.productUseNum ? scope.row.productUseNum : '/' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="arriveNum"
                  label="到件产品数量">
                  <template slot-scope="scope">
                    {{ scope.row.arriveNum ? scope.row.arriveNum : '/' }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="proudctNum"
                  label="产品数量">
                </el-table-column>
                <el-table-column
                  prop="proudctPackNum"
                  label="包件数量">
                </el-table-column>
                <el-table-column
                  prop="installFee"
                  label="安装费用">
                </el-table-column>
                <el-table-column
                  prop="memo"
                  label="备注">
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </Portlet>
        <!--商品信息 抛单的-->
        <GoodsInfo v-if="expatriate" :detail="detail"></GoodsInfo>
        <!--总包件信息-->
        <Portlet class="show">
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="总包件：">
              <span>{{chOrder.totalPackage}} 件</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="总体积:">
              <span>{{ chOrder.totalVolume }} m³</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="总重量：">
              <span >{{ chOrder.totalWeight }}  kg</span>
            </el-form-item>
          </el-col>
        </Portlet>

        <!--客户信息-->
        <Portlet class="show" title="客户信息">
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="客户姓名：">
              <span>{{ orderConsigneeInfo.consigneName }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="客户电话：">
              <span>{{ orderConsigneeInfo.consignePhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="客户地址：">
              <span>{{orderConsigneeInfo.consigneProvince}} {{orderConsigneeInfo.consigneCity}} {{orderConsigneeInfo.consigneDistrict}} {{orderConsigneeInfo.consigneAddress}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="有无电梯：">
              <span>{{ orderConsigneeInfo.elevator ? '有' : '无' }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="楼层数：">
              <span>{{ orderConsigneeInfo.floor}}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="预约时间：">
              <!--<span style="color:red;">暂无/ 未知</span>-->
              <span>{{ chServiceAppointmentDispatch.start | unixTimestampFilter('YYYY/MM/DD') }} {{ chServiceAppointmentDispatch.timeInterval }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12"  :xl="12">
            <el-form-item label="客户备注：">
              <span>{{ orderConsigneeInfo.consigneMemo}}</span>
            </el-form-item>
          </el-col>

        </Portlet>
        <!--提货信息-->
        <PickupInfo @refresh="refresh" :detail="detail"></PickupInfo>
        <!--代收款-->
        <PaymentForGoods @refresh="refresh" :detail="detail"></PaymentForGoods>
        <!--费用信息-->
        <FeeDetail :detail="orderCosts"></FeeDetail>
        <!--核销-->
        <Portlet title="核销">
          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item label="核销类型：">
              <span v-if="detail.verifitySource">{{ detail.verifitySource | filterDataBaseDictionary }}</span>
              <span v-else>无</span>
            </el-form-item>
          </el-col>

          <el-col :lg="8" :md="12"  :xl="6">
            <el-form-item v-if="verifityNoListStr" label="核销单号：">
              <span>{{ verifityNoListStr }}</span>
            </el-form-item>
          </el-col>
        </Portlet>

        <Portlet title="其他信息">
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="外部单号：">
              <span>{{ chOrder.orderSourceNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="接单价：">
              <span>{{ chOrder.pickOrderMoney | decimalNumFilter }} 元</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="总货值：">
              <span>{{ chOrder.cargoPrice|decimalNumFilter}} 元</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="推单来源：">
              <span>{{ chOrder.outSourceWarehouse }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="推单单号：">
              <span>{{ chOrder.outNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :md="12" :xl="12">
            <el-form-item label="订单备注：">
              <span>{{chOrder.memo}}</span>
            </el-form-item>
          </el-col>
        </Portlet>

        <!-- 有交接信息就展示 -->
        <Portlet title="交接信息" v-if="trunkSolicitationBean.solicitationName || trunkSolicitationBean.solicitationPhone">
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="交接姓名：">
              <span>{{ trunkSolicitationBean.solicitationName }}</span>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" :xl="6">
            <el-form-item label="交接电话：">
              <span>{{ trunkSolicitationBean.solicitationPhone }}</span>
            </el-form-item>
          </el-col>
        </Portlet>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import PickupInfo from '@/views/oms/orders/serviceOrders/detail/PickupInfo'
import GoodsInfo from '@/views/oms/orders/serviceOrders/detail/GoodsInfo'
import PaymentForGoods from '@/views/oms/orders/serviceOrders/detail/PaymentForGoods'
import FeeDetail from '@/views/oms/orders/serviceOrders/detail/FeeDetail'
import {decimalNumFilter, unixTimestampFilter} from '@/filters'
// import {dotData} from '@/utils'
export default {
  components: {
    PaymentForGoods,
    FeeDetail,
    PickupInfo,
    GoodsInfo
  },
  props: {
    toEdit: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    detail: {
      type: Object,
      default() {
        return {}
      }
    },
    // 是否是抛单
    expatriate: { // 抛单的商品类型不同
      type: Boolean,
      default: false
    }
  },
  computed: {
    chOrder() {
      return this.detail.chOrder || {}
    },
    arrivalInfo() {
      return this.detail.arrivalInfo || {}
    },
    orderConsigneeInfo() {
      return this.detail.chOrderConsigneeInfo || {}
    },
    orderCosts() {
      return this.detail.orderCosts || []
    },
    productExtBeans() {
      return this.detail.productExtBeans || []
    },
    chServiceAppointmentDispatch() {
      return this.detail.chServiceAppointmentDispatch || {}
    },
    chServiceCollectionCostList() {
      return this.detail.chServiceCollectionCostList || []
    },
    // 干线(交接)信息
    trunkSolicitationBean() {
      return this.detail.trunkSolicitationBean || []
    },
    // 核销单号
    verifityNoListStr() {
      let temp = this.detail.verifityNoList
      if (Array.isArray(temp)) {
        return temp.map(v => v.tradeCode).join(',')
      }
      return ''
    }
  },
  methods: {
    unixTimestampFilter,
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        const values = data.map(item => Number(item[column.property]))
        if (index === 0) {
          sums[index] = '合计'
        } else {
          if (column.property === 'proudctNum' || column.property === 'proudctPackNum' || column.property === 'installFee') {
            let temp = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = decimalNumFilter(temp, (column.property === 'proudctNum' || column.property === 'proudctPackNum') ? 0 : 2)
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    getType(num) {
      if (num === 1) {
        return '标准产品'
      }
      if (num === 2) {
        return '通用产品'
      }
      if (num === 3) {
        return '自定义产品'
      }
    },
    toEditRedirect() {
      if (this.chOrder.id) {
        this.$router.push({path: '/ss-oms/orders/service-orders/edit/' + this.chOrder.id})
      }
    },
    refresh(refresh = true) {
      this.$emit('refresh', refresh)
    }
  }
}
</script>
